<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 
        标签的嵌套规则
            父子关系   外层父元素    内层子元素

            1 div可以嵌套任何标签
            2 p标签只能嵌套左右排列的这种小标签 --- 行内标签
            3 h1-h6  建议嵌套小标签
            4 单标签不能嵌套  br  img  meta
            5 小标签  span  strong   u  i   del ....     大套小    小不能套大   小套小   但是a里面不能套a 

            6 组合标签
                table  tr  td
                ul li 
                ol li
                dl dt+dd
     -->

    <div>
        <h2>标题</h2>
        <ul>
            <li>
                <h1>222</h1>
                <div></div>
            </li>
        </ul>
    </div>

    <p>
        <img src="" alt="">
        <strong>加粗的</strong>
    </p>

    <h1>
        <!-- <h2>错误的</h2> -->
        <p>不合适</p>
        <u></u>
    </h1>


    <br>
    <img src="" alt="">

    <a href="">点这个字跳转</a>


    <span>
        <div>不合适</div>
    </span>


    <em>
        <strong>倾斜又加粗</strong>
    </em>

    <strong>
        <em>倾斜又加粗</em>
    </strong>

    <em>
        <em>倾斜</em>
    </em>

    <!-- <a href="baiadu">
        <a href="jd">报错</a>
    </a> -->


    <!-- h1   img  a -->
    <h1>
        <a href="">
            <img src="" alt="">
        </a>
    </h1>

    <!-- <a href="">
        <h1>
            <img src="" alt="">
        </h1>
    </a> -->


</body>

</html>